import { createStore, combineReducers } from 'redux'

// Reducer
function reducer1(state = ['Jack'], action) {
  if (action.type === 'ADD') {
    return state.concat([action.payload])
  }
  if (action.type === 'CLEAR') {
    return []
  }
  return state
}

function reducer2(state = null, action) {
  if (action.type === 'SET') {
    return action.payload
  }
  return state
}

function reducer31(state = null, action) {
  if (action.type === 'c1/SET') {
    return action.payload
  }
  return state
}
function reducer32(state = null, action) {
  if (action.type === 'c2/SET') {
    return action.payload
  }
  return state
}

const reducer3 = combineReducers({
  c1: reducer31,
  c2: reducer32
})

const reducers = combineReducers({
  a: reducer1,
  b: reducer2,
  c: reducer3
})

const store = createStore(reducers)

const displayer = document.getElementById('displayer')
function display() {
  displayer.innerHTML = JSON.stringify(store.getState())
}
document.getElementById('clear_button').addEventListener('click', () => {
  store.dispatch({ type: 'CLEAR' })
})
document.getElementById('add_button').addEventListener('click', () => {
  // store.dispatch({ type: 'ADD', payload: 'gaga' + Date.now() })
  store.dispatch({ type: 'c2/SET', payload: { name: 'Peter' } })
})

display()
store.subscribe(display)
